<!DOCTYPE HTML>
<html>
<head>
    <head>
    <#include "../common/_meta.html">
        <title>修改用户信息</title>
    </head>

    <style>
        /*修改提示文字的颜色*/
        input::-webkit-input-placeholder { /* WebKit browsers */
            color: red;
        }
        input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: red;
        }
        input::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: red;
        }
        input:-ms-input-placeholder { /* Internet Explorer 10+ */
            color: red;
        }
    </style>
</head>
<body>
<article class="cl pd-20">
    <form class="form form-horizontal" id="from-add-user">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>用户名：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" id="name" name="name">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>昵称：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text"  placeholder="" id="nickName" name="nickName">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">等级：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <select id="level" name="level" class="select">
                    <option value="2" name="level">用户</option>
                    <#if level?exists && level == 0>
                        <option value="1" name="level">管理员</option>
                    </#if>
                </select>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>新密码：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="password" class="input-text" autocomplete="off"
                       name="pwd" id="pwd">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>确认密码：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="password" class="input-text" autocomplete="off"
                       name="pwd2" id="pwd2">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">集群授权：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <dl class="permission-list">
                    <dt>
                        <label>
                            <input type="checkbox" onclick="selectAll()" value="全部" name="全部" id="selectAll">所有集群</label>
                    </dt>
                    <div id = "clusterList">
                        <#if clusters?exists>
                            <#list clusters as c>
                                <dd>
                                    <label>
                                        <input type="checkbox" name = "clusters" value="${c}">${c}
                                    </label>
                                </dd>
                            </#list>
                        </#if>
                    </div>
                </dl>
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;保存&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</article>

<#include "../common/_footer.html">

<script type="text/javascript">

    window.onload = function () {
        var all = document.getElementById ("selectAll");
        var cl = document.getElementById ("clusterList");
        var ach = cl.getElementsByTagName ("input");

        // 设置全选按钮选中的时候，遍历选中所有子复选框
        all.onclick = function () {
            for ( var i = 0; i < ach.length; i++) {
                ach[i].checked = this.checked;
            }
        }
        // 子复选框有一个未选中时，去掉全选按钮的选中状态
        for ( var i = 0; i < ach.length; i++) {
            ach[i].onclick = function () {
                if ( !this.checked ) {
                    all.checked = false;
                }
            };
        }
        //
        $("#from-add-user").validate({
            rules:{
                name:{
                    required:true
                },
                nickName:{
                    required:true
                },
                pwd:{
                    required:true,
                    minlength:6,
                    maxlength:16
                },
                pwd2:{
                    required:true,
                    minlength:6,
                    maxlength:16,
                    equalTo: "#pwd"
                },
            },
            onkeyup:false,
            focusCleanup:true,
            success:"valid",
            submitHandler:function(){
                invoke();
            }
        });


    }

    /* 增加用户信息 */
    function invoke() {
        var index = layer.load(2);
        $.ajax({
            type: "POST",
            url: "${base}/user/add",
            data: $('#from-add-user').serialize(),
            dataType: "json",
            success: function (result) {
                layer.close(index);
                if(result.code == 0) {
                    layer.msg("新增成功", {icon:6,time:1000}, function () { layer_close();});
                } else {
                    layer.alert("新增失败", {icon:5,time:1000}, function () {layer_close();});
                }
            },
            error: function () {
                layer.close(index);
                layer.msg("内部错误", {icon:5,time:1000}, function () {layer_close();});
            }
        });
    }

    $("#name").blur(function () {
        var name = $("#name").val();
        $.ajax({
            type: 'GET',
            async : false, // 同步请求
            url: '/user/add/check',
            data : {
                name : name
            },
            dataType: 'json',
            scriptCharset : 'utf-8',
            timeout : 5000,
            success: function(result) {
                console.log(result);
                if(result.code == 1) {
                    $("#name").val("").focus();
                    $("#name").attr("placeholder", '该用户名已经存在');
                }
            },
            error: function() {
                layer.msg("内部错误", {icon:5,time:2000}, function () {layer_close();});
            }
        });
    });
</script>
</body>
</html>